<template>
  <basic-container>
    <el-form label-width="100px" :inline="true" :rules="rules">
      <el-form-item label="工单号:" prop="workOrderNo">
        <el-input ref="workOrderNoProperties" v-model="workOrderNo" @keyup.enter.native="onSubmit">
          <el-button slot="append" icon="el-icon-search" @click="openWorkOrderNoModal"></el-button>
        </el-input>
      </el-form-item>
      <div style="margin-left: 3%; display: inline-block">
        <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button size="small" @click="clear">清空</el-button>
      </div>
    </el-form>
    <el-divider>基础信息</el-divider>
    <div id="workOrderInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>工单信息</h4>
      </div>
      <!-- <span>共{{ workOrderInfoData.length }}条记录</span> -->
    </div>
    <avue-crud :option="workOrderInfoOption" :data="workOrderInfoData" ref="workOrderInfo"></avue-crud>

    <div id="productInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>产品信息</h4>
      </div>
      <span>共{{ page.total }}条记录</span>
    </div>
    <avue-crud
      :option="productInfoOption"
      :page.sync="page"
      :data="productInfoData"
      ref="productInfo"
      @current-change="currentChange"
      @on-load="onLoad"
      @size-change="sizeChange"
    ></avue-crud>
    <el-divider>生产信息</el-divider>
    <div id="pickingInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>领料信息</h4>
      </div>
      <span>共{{ pickingInfoData.length }}条记录</span>
    </div>
    <avue-crud :option="pickingInfoOption" :data="pickingInfoData" ref="pickingInfo"> </avue-crud>

    <div id="passingStationInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>过站信息</h4>
      </div>
      <span>共{{ stationPage.total }}条记录</span>
    </div>
    <avue-crud
      @on-load="onStationInfoLoad"
      :page.sync="stationPage"
      @size-change="stationSizeChange"
      @current-change="stationCurrentChange"
      :option="passingStationInfoOption"
      :data="passingStationInfoData"
      ref="passingStationInfo"
    >
      <!-- <template slot-scope="{}" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text">查看</el-button>
      </template> -->
    </avue-crud>

    <el-divider>发货信息</el-divider>
    <div id="deliverGoodsInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <h4>发货信息</h4>
      </div>
      <span>共{{ deliverGoodsInfoData.length }}条记录</span>
    </div>
    <avue-crud :option="deliverGoodsInfoOption" :data="deliverGoodsInfoData" ref="deliverGoodsInfo">
      <template slot-scope="{ row }" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text" @click="deliverGoodsInfoDetail(row)">查看发货单</el-button>
      </template>
    </avue-crud>

    <el-dialog append-to-body title="发货信息" :visible.sync="isShowDeliverGoodsInfoDetail" width="60%">
      <avue-form v-model="deliverGoodsInfoForm" :option="deliverGoodsInfoDetailOption"></avue-form>
      <avue-crud :option="deliverGoodsListOption" :data="deliverGoodsList"></avue-crud>
    </el-dialog>

    <el-card class="box-card-hide" v-if="!showDirectory">
      <div slot="header" class="clearfix">
        <el-tooltip style="float: right; padding: 3px 3px; cursor: pointer" class="item" effect="dark" content="展示目录" placement="bottom">
          <i @click="showDirectory = true" class="el-icon-arrow-left"></i>
        </el-tooltip>
      </div>
    </el-card>
    <el-card class="box-card" v-dialogDrag v-if="showDirectory">
      <div slot="header" class="clearfix">
        <span>目录</span>
        <el-tooltip style="float: right; padding: 3px 3px; cursor: pointer" class="item" effect="dark" content="收起目录" placement="bottom">
          <i @click="showDirectory = false" class="el-icon-arrow-right"></i>
        </el-tooltip>
      </div>
      <div class="catalogue">
        基础信息
        <ul>
          <li @click="goToLocation('#workOrderInfo')">工单信息</li>
          <li @click="goToLocation('#productInfo')">产品信息</li>
        </ul>
        生产信息
        <ul>
          <li @click="goToLocation('#pickingInfo')">领料信息</li>
          <li @click="goToLocation('#passingStationInfo')">过站信息</li>
        </ul>

        发货信息
        <ul>
          <li @click="goToLocation('#deliverGoodsInfo')">发货信息</li>
        </ul>
      </div>
    </el-card>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows"> </common-modal-template>
  </basic-container>
</template>
<script>
import {
  getWorkOrderList,
  getShipListByWorkOrderNo,
  getPickingListByWorkOrderNo,
  getProductByWorkOrderNoList,
  getStationInfoByWorkOrderNoList
} from '@/api/cloud/cloud_workOrderProgress.js';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
export default {
  name: 'CloudCloudWorkOrderProgress',
  components: {
    CommonModalTemplate
  },
  data() {
    return {
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      stationPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      catalogue: true,
      showDirectory: true,
      workOrderNo: '',
      rules: {
        workOrderNo: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ]
      },
      workOrderInfoData: [], //工单信息
      workOrderInfoOption: {
        //工单信息表格配置
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: '产品型号',
            prop: 'partModel'
          },
          {
            label: '计划生产数量',
            prop: 'quantity'
          },
          {
            label: '车间',
            prop: 'workshopName'
          },
          {
            label: '产线',
            prop: 'lineName'
          },
          {
            label: '生产订单',
            prop: 'productionOrderNo'
          }
        ]
      },
      productInfoData: [], //产品信息
      productInfoOption: {
        //产品信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '当前工序',
            prop: 'currRouteName'
          },
          {
            label: '工序类型',
            prop: 'currRouteType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=station_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: '请输入工序类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '下一工序',
            prop: 'nextRouteName'
          }
        ]
      },
      pickingInfoData: [], //领料信息
      pickingInfoOption: {
        //领料信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        menuWidth: 100,
        column: [
          {
            label: '领料单号',
            prop: 'sheetNo'
          },
          {
            label: '物料编码',
            prop: 'partMasterCode'
          },
          {
            label: '物料名称',
            prop: 'partMasterName'
          },
          {
            label: '包装条码',
            prop: 'sequenceNumber'
          },
          {
            label: '包装数量',
            prop: 'sequenceQuantity'
          },
          {
            label: '物料批次',
            prop: 'lotNo'
          },
          {
            label: '领料时间',
            prop: 'eventDate'
          }
        ]
      },
      passingStationInfoData: [], //过站信息
      passingStationInfoOption: {
        //过站信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        menuWidth: 100,
        column: [
          {
            label: '工序名称',
            prop: 'routeName'
          },
          {
            label: '工序类型',
            prop: 'routeType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=station_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '已过站数量',
            prop: 'passQuantity'
          },
          {
            label: '未过站数量',
            prop: 'waitingQuantity'
          },
          {
            label: '不良登记数量',
            prop: 'ngQuantity'
          },
          {
            label: '产线',
            prop: 'lineName'
          },
          {
            label: '工位',
            prop: 'stationName'
          },
          {
            label: '设备',
            prop: 'equipmentName'
          },
          {
            label: '最后过站人员',
            prop: 'updateUserName'
          },
          {
            label: '最后过站时间',
            prop: 'lastOperationTime'
          }
        ]
      },

      modalTitle: '',
      deliverGoodsInfoData: [], //发货信息
      deliverGoodsInfoOption: {
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '包装条码',
            prop: 'packNumber'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          },
          {
            label: '包规数量',
            prop: 'packQuantitySpec'
          },
          {
            label: '发货单号',
            prop: 'sheetNo'
          },
          {
            label: '客户代码',
            prop: 'code'
          },
          {
            label: '客户名称',
            prop: 'partner'
          },
          {
            label: '发货地址',
            prop: 'locAddress'
          },
          {
            label: '发货数量',
            prop: 'quantity'
          },
          {
            label: '发货日期',
            prop: 'eventDate'
          },
          {
            label: '发货操作人',
            prop: 'consignor'
          }
        ]
      },
      isShowDeliverGoodsInfoDetail: false, //是否显示发货信息详情
      deliverGoodsInfoForm: {},
      deliverGoodsInfoDetailOption: {
        //发货信息详情
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 100,
        column: [
          {
            label: '发货单号',
            prop: 'sheetNo',
            disabled: false
          },
          {
            label: '客户名称',
            prop: 'partner',
            disabled: false
          },
          {
            label: '发货人员',
            prop: 'consignor',
            disabled: false
          },
          {
            label: '发货时间',
            prop: 'deliveryDate',
            disabled: false
          }
        ]
      },
      deliverGoodsListOption: {
        //发货详情表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '产品编码',
            prop: 'productNo'
          },
          {
            label: '产品名称',
            prop: 'productName'
          },
          {
            label: '产品规格',
            prop: 'productModel'
          },
          {
            label: '客户料号',
            prop: 'partner'
          },
          {
            label: '单位',
            prop: 'uom'
          },
          {
            label: '需求数量',
            prop: 'requiredQuantity'
          },
          {
            label: '已出库数量',
            prop: 'issuedQuantity'
          },
          {
            label: '备注',
            prop: 'remark'
          }
        ]
      },
      tableOption: {
        modalTitle: '选择工单号（双击进行选择）',
        url: '/api/mes-cloud/workorder/page',
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '生产订单',
            prop: 'productionOrderNo',
            search: true
          },
          {
            label: '生产工单',
            prop: 'orderNo',
            search: true
          },
          {
            label: '工单类型',
            prop: 'orderType',
            type: 'select'
          },
          {
            label: '工单数量',
            prop: 'planQuantity'
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: 'BOM版本',
            prop: 'bomVersion'
          },
          {
            label: '派工产线',
            prop: 'productionLineName'
          },
          {
            label: '计划开始时间',
            prop: 'planStartDate'
          },
          {
            label: '计划结束时间',
            prop: 'planEndDate'
          },
          {
            label: '制定人',
            prop: 'creatorName'
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=mfg_work_order'
          }
        ]
      } //公用模态框配置信息
    };
  },
  methods: {
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    stationCurrentChange() {
      this.stationPage.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.stationPage.pageSize = pageSize;
    },
    //产品信息进行分页
    onLoad(page, params = {}) {
      if (this.workOrderNo) {
        getProductByWorkOrderNoList(page.currentPage, page.pageSize, Object.assign({ workOrderNo: this.workOrderNo })).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.productInfoData = data.records;
        });
      } else {
        this.productInfoData = [];
      }
    },

    //过站信息进行分页
    onStationInfoLoad(page, params = {}) {
      if (this.workOrderNo) {
        getStationInfoByWorkOrderNoList(page.currentPage, page.pageSize, Object.assign({ workOrderNo: this.workOrderNo })).then((res) => {
          const data = res.data.data;
          this.stationPage.total = data.total;
          this.passingStationInfoData = data.records;
        });
      } else {
        this.passingStationInfoData = [];
      }
    },
    async onSubmit() {
      if (!this.workOrderNo) {
        this.$message({
          type: 'warning',
          message: '请选择工单号！'
        });
        return;
      }
      let workOrderDataInfo = await getWorkOrderList({ workOrderNo: this.workOrderNo });
      let workOrderData = this._get(workOrderDataInfo, 'data.data', null);
      workOrderData ? (this.workOrderInfoData = [].concat([workOrderData])) : (this.workOrderInfoData = []); //工单信息
      this.onStationInfoLoad(this.stationPage, {});
      this.onLoad(this.page, {}); //产品信息
      let pickingInfo = await getPickingListByWorkOrderNo(this.workOrderNo);
      this.pickingInfoData = this._get(pickingInfo, 'data.data', []); //领料信息
      let deliverGoodsData = await getShipListByWorkOrderNo(this.workOrderNo);
      this.deliverGoodsInfoData = this._get(deliverGoodsData, 'data.data', []); //发货信息
    },

    clear() {
      this.workOrderNo = '';
      this.workOrderInfoData = this.passingStationInfoData = this.productInfoData = this.pickingInfoData = this.deliverGoodsInfoData = [];
      this.$nextTick(() => {
        this.$refs.workOrderNoProperties.focus();
      });
    },

    /**
     * 打开工单号选择模态框
     */
    openWorkOrderNoModal() {
      this.modalName = 'workOrderModal';
      this.$refs.commonModalTemplate.showModal();
    },

    /**
     * 选择模态框行数据
     */
    getSelectedRows(rowData) {
      if (this.modalName === 'workOrderModal') {
        this.workOrderNo = rowData.orderNo;
        this.onSubmit();
      }
    },

    /**
     * 查看发货信息详情
     */
    deliverGoodsInfoDetail(row) {
      this.isShowDeliverGoodsInfoDetail = true;
      this.deliverGoodsInfoForm.sheetNo = row.no;
      this.deliverGoodsInfoForm.partner = row.partner;
      this.deliverGoodsInfoForm.consignor = row.consignor;
      this.deliverGoodsInfoForm.deliveryDate = row.deliveryDate;
      this.deliverGoodsList = row.details;
    },
    /**
     * 页面内定位表格
     */
    goToLocation(type) {
      $('#avue-view').animate(
        {
          scrollTop: $(type).offset().top + $('#avue-view').scrollTop() - 110
        },
        500
      );
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs.workOrderNoProperties.focus();
    });
  }
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: center;
  .titleLeft {
    display: flex;
    align-items: center;
  }
  span {
    color: #0995bb;
  }
}
::v-deep .el-card__body {
  .avue-crud__menu {
    display: none;
  }
}
::v-deep .el-table {
  margin-bottom: 25px;
}
.box-card {
  position: absolute;
  top: 30%;
  right: 1%;
  width: 10%;
  height: 50%;
  z-index: 9999;
  .catalogue {
    ul {
      margin-left: -10px;
      li {
        list-style: disc;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
}

.box-card-hide {
  position: absolute;
  top: 30%;
  right: 1%;
  height: 7%;
  width: 3%;
  z-index: 9999;
  .catalogue {
    ul {
      margin-left: -10px;
      li {
        list-style: disc;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
}
</style>
